<template>
<div class="popular-section">
    <div class="popular-container">
        <!-- 热门景区 -->
        <div class="popular-category">
            <div class="category-header">
                <h2 class="category-title">热门景区</h2>
                <p class="category-subtitle">Popular Scenic Spots</p>
                <p class="category-desc">发现令人向往的美丽乡村景点</p>
                <a href="./site" class="view-more">查看更多 ></a>
            </div>
            <div class="category-content">
                <div class="destination-card" v-for="(site, index) in sites.slice(0, 3)" :key="'site-' + index">
                    <div class="card-image" :style="{ backgroundImage: `url(${site.sitePicture})` }">
                        <div class="card-overlay">
                            <h3 class="card-title">{{ site.siteTitle }}</h3>
                            <p class="card-info">最佳季节: {{ site.siteSeason || '全年' }}</p>
                            <p class="card-attractions">{{ site.siteDesc ? site.siteDesc.slice(0, 20) + '...' : '美丽乡村，自然风光' }}</p>
                            <el-button type="primary" size="small" class="view-details" @click.stop="showSiteDetail(site, index)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 品质民宿 -->
        <div class="popular-category">
            <div class="category-header">
                <h2 class="category-title">品质民宿</h2>
                <p class="category-subtitle">Quality Homestays</p>
                <p class="category-desc">体验当地特色住宿环境</p>
                <a href="./hotel" class="view-more">查看更多 ></a>
            </div>
            <div class="category-content">
                <div class="destination-card" v-for="(hotel, index) in hotels.slice(0, 3)" :key="'hotel-' + index">
                    <div class="card-image" :style="{ backgroundImage: `url(${hotel.hotelPicture})` }">
                        <div class="card-overlay">
                            <h3 class="card-title">{{ hotel.hotelName }}</h3>
                            <p class="card-info">价格: ¥{{ hotel.hotelPrice }}</p>
                            <p class="card-attractions">{{ hotel.hotelAddress }}</p>
                            <el-button type="primary" size="small" class="view-details" @click.stop="showHotelDetail(hotel, index)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 好评美食 -->
        <div class="popular-category">
            <div class="category-header">
                <h2 class="category-title">好评美食</h2>
                <p class="category-subtitle">Popular Foods</p>
                <p class="category-desc">享受地道乡村特色美食</p>
                <a href="./product" class="view-more">查看更多 ></a>
            </div>
            <div class="category-content">
                <div class="destination-card" v-for="(product, index) in products.slice(0, 3)" :key="'product-' + index">
                    <div class="card-image" :style="{ backgroundImage: `url(${product.productPicture})` }">
                        <div class="card-overlay">
                            <h3 class="card-title">{{ product.productName }}</h3>
                            <p class="card-info">价格: ¥{{ product.productPrice }}</p>
                            <p class="card-attractions">{{ product.productDesc ? product.productDesc.slice(0, 20) + '...' : '乡村特色美食' }}</p>
                            <el-button type="primary" size="small" class="view-details" @click.stop="showProductDetail(product, index)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 乐享活动 -->
        <div class="popular-category">
            <div class="category-header">
                <h2 class="category-title">乐享活动</h2>
                <p class="category-subtitle">Fun Activities</p>
                <p class="category-desc">参与丰富多彩的文化活动</p>
                <a href="./activity" class="view-more">查看更多 ></a>
            </div>
            <div class="category-content">
                <div class="destination-card" v-for="(activity, index) in activities.slice(0, 3)" :key="'activity-' + index">
                    <div class="card-image" :style="{ backgroundImage: `url(${activity.activityPicture})` }">
                        <div class="card-overlay">
                            <h3 class="card-title">{{ activity.activityTitle }}</h3>
                            <p class="card-info">时间: {{ activity.activityDate }}</p>
                            <p class="card-attractions">{{ activity.activityAddress }}</p>
                            <el-button type="primary" size="small" class="view-details" @click.stop="showActivityDetail(activity, index)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 精品线路 -->
        <div class="popular-category">
            <div class="category-header">
                <h2 class="category-title">精品线路</h2>
                <p class="category-subtitle">Premium Routes</p>
                <p class="category-desc">定制专属乡村旅游路线</p>
                <a href="./line" class="view-more">查看更多 ></a>
            </div>
            <div class="category-content">
                <div class="destination-card" v-for="(line, index) in lines.slice(0, 3)" :key="'line-' + index">
                    <div class="card-image" :style="{ backgroundImage: `url(${line.linePicture})` }">
                        <div class="card-overlay">
                            <h3 class="card-title">{{ line.lineStart }} ——> {{ line.lineEnd }}</h3>
                            <p class="card-info">时长: {{ line.lineTimes }}</p>
                            <p class="card-attractions">{{ line.lineDesc }}</p>
                            <el-button type="primary" size="small" class="view-details" @click.stop="showLineDetail(line, index)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 非遗文化 -->
        <div class="popular-category">
            <div class="category-header">
                <h2 class="category-title">非遗文化</h2>
                <p class="category-subtitle">Intangible Cultural Heritage</p>
                <p class="category-desc">传承千年文化，感受非遗魅力</p>
                <a href="./ich" class="view-more">查看更多 ></a>
            </div>
            <div class="category-content">
                <div class="destination-card" v-for="(ich, index) in ichs.slice(0, 3)" :key="'ich-' + index">
                    <div class="card-image" :style="{ backgroundImage: `url(${ich.ichPicture})` }">
                        <div class="card-overlay">
                            <h3 class="card-title">{{ ich.ichName }}</h3>
                            <p class="card-info">传承地: {{ ich.ichLocation }}</p>
                            <p class="card-attractions">{{ ich.ichDesc }}</p>
                            <el-button type="primary" size="small" class="view-details" @click.stop="showIchDetail(ich, index)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 景区详情对话框 -->
    <el-dialog
        title="景区详情"
        :visible.sync="siteDetailVisible"
        width="800px"
        :before-close="handleClose">
        <div class="detail-dialog" v-if="selectedSite">
            <div class="detail-image">
                <img :src="selectedSite.sitePicture" :alt="selectedSite.siteTitle" />
            </div>
            <div class="detail-content">
                <h2>{{ selectedSite.siteTitle }}</h2>
                <div class="detail-info">
                    <p><i class="el-icon-location"></i> 景点地址：{{ selectedSite.siteCity }}</p>
                    <p><i class="el-icon-s-ticket"></i> 门票价格：{{ selectedSite.sitePrice }}元</p>
                    <p><i class="el-icon-star-on"></i> 推荐星级：<el-rate v-model="selectedSite.siteStar" disabled show-score text-color="#ff9900" :max="5"></el-rate></p>
                    <p><i class="el-icon-document"></i> 景点介绍：{{ selectedSite.siteDesc }}</p>
                </div>
                <div class="detail-actions">
                    <el-button type="primary" size="large" @click="handleSiteBook">立即预订</el-button>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="siteDetailVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 民宿详情对话框 -->
    <el-dialog
        title="民宿详情"
        :visible.sync="hotelDetailVisible"
        width="800px"
        :before-close="handleClose">
        <div class="detail-dialog" v-if="selectedHotel">
            <div class="detail-image">
                <img :src="selectedHotel.hotelPicture" :alt="selectedHotel.hotelName" />
            </div>
            <div class="detail-content">
                <h2>{{ selectedHotel.hotelName }}</h2>
                <div class="detail-info">
                    <p><i class="el-icon-location"></i> 民宿地址：{{ selectedHotel.hotelAddress }}</p>
                    <p><i class="el-icon-s-ticket"></i> 住宿价格：{{ selectedHotel.hotelPrice }}元/天</p>
                    <p><i class="el-icon-star-on"></i> 推荐星级：<el-rate v-model="selectedHotel.hotelStar" disabled show-score text-color="#ff9900" :max="5"></el-rate></p>
                    <p><i class="el-icon-document"></i> 民宿介绍：{{ selectedHotel.hotelDesc }}</p>
                </div>
                <div class="detail-actions">
                    <el-button type="primary" size="large" @click="handleHotelBook">立即预订</el-button>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="hotelDetailVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 美食详情对话框 -->
    <el-dialog
        title="美食详情"
        :visible.sync="productDetailVisible"
        width="800px"
        :before-close="handleClose">
        <div class="detail-dialog" v-if="selectedProduct">
            <div class="detail-image">
                <img :src="selectedProduct.productPicture" :alt="selectedProduct.productName" />
            </div>
            <div class="detail-content">
                <h2>{{ selectedProduct.productName }}</h2>
                <div class="detail-info">
                    <p><i class="el-icon-shopping-bag-1"></i> 美食类型：{{ selectedProduct.productType }}</p>
                    <p><i class="el-icon-s-ticket"></i> 单件价格：{{ selectedProduct.productPrice }}元</p>
                    <p><i class="el-icon-star-on"></i> 推荐星级：<el-rate v-model="selectedProduct.productStar" disabled show-score text-color="#ff9900" :max="5"></el-rate></p>
                    <p><i class="el-icon-document"></i> 美食介绍：{{ selectedProduct.productDesc }}</p>
                </div>
                <div class="detail-actions">
                    <el-button type="primary" size="large" @click="handleProductBook">立即预订</el-button>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="productDetailVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 活动详情对话框 -->
    <el-dialog
        title="活动详情"
        :visible.sync="activityDetailVisible"
        width="800px"
        :before-close="handleClose">
        <div class="detail-dialog" v-if="selectedActivity">
            <div class="detail-image">
                <img :src="selectedActivity.activityPicture" :alt="selectedActivity.activityTitle" />
            </div>
            <div class="detail-content">
                <h2>{{ selectedActivity.activityTitle }}</h2>
                <div class="detail-info">
                    <p><i class="el-icon-s-promotion"></i> 活动时间：{{ selectedActivity.activityDate }}</p>
                    <p><i class="el-icon-location"></i> 活动地址：{{ selectedActivity.activityAddress }}</p>
                    <p><i class="el-icon-s-ticket"></i> 活动价格：{{ selectedActivity.activityPrice }}</p>
                    <p><i class="el-icon-star-on"></i> 推荐星级：<el-rate v-model="selectedActivity.activityStar" disabled show-score text-color="#ff9900" :max="5"></el-rate></p>
                    <p><i class="el-icon-document"></i> 活动介绍：{{ selectedActivity.activityDesc }}</p>
                </div>
                <div class="detail-actions">
                    <el-button type="primary" size="large" @click="handleActivityBook">立即报名</el-button>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="activityDetailVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 线路详情对话框 -->
    <el-dialog
        title="线路详情"
        :visible.sync="lineDetailVisible"
        width="800px"
        :before-close="handleClose">
        <div class="detail-dialog" v-if="selectedLine">
            <div class="detail-image">
                <img :src="selectedLine.linePicture" :alt="selectedLine.lineStart + ' ——> ' + selectedLine.lineEnd" />
            </div>
            <div class="detail-content">
                <h2>{{ selectedLine.lineStart }} ——> {{ selectedLine.lineEnd }}</h2>
                <div class="detail-info">
                    <p><i class="el-icon-time"></i> 线路时长：{{ selectedLine.lineTimes }}</p>
                    <p><i class="el-icon-star-on"></i> 推荐星级：<el-rate v-model="selectedLine.lineStar" disabled show-score text-color="#ff9900" :max="5"></el-rate></p>
                    <p><i class="el-icon-document"></i> 线路介绍：{{ selectedLine.lineDesc }}</p>
                </div>
                <div class="detail-actions">
                    <el-button type="primary" size="large" @click="handleLineBook">立即预订</el-button>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="lineDetailVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 非遗详情对话框 -->
    <el-dialog
        title="非遗详情"
        :visible.sync="ichDetailVisible"
        width="800px"
        :before-close="handleClose">
        <div class="detail-dialog" v-if="selectedIch">
            <div class="detail-image">
                <img :src="selectedIch.ichPicture" :alt="selectedIch.ichName" />
            </div>
            <div class="detail-content">
                <h2>{{ selectedIch.ichName }}</h2>
                <div class="detail-info">
                    <p><i class="el-icon-document"></i> 非遗介绍：{{ selectedIch.ichDesc }}</p>
                </div>
                <div class="detail-actions">
                    <p style="color: #999; font-style: italic;">非遗文化仅供参观学习，无需预订</p>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="ichDetailVisible = false">关 闭</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import line from "../views/Line.vue";

const axios = require('axios')

export default {
    name: 'HomePopular',
	computed: {
		line() {
			return line
		}
	},
    data() {
        return {
            sites: [],
            hotels: [],
            products: [],
            activities: [],
            lines: [],
            ichs: [],
            // 详情弹窗相关数据
            siteDetailVisible: false,
            hotelDetailVisible: false,
            productDetailVisible: false,
            activityDetailVisible: false,
            lineDetailVisible: false,
            ichDetailVisible: false,
            selectedSite: null,
            selectedHotel: null,
            selectedProduct: null,
            selectedActivity: null,
            selectedLine: null,
            selectedIch: null,
            routes: [
                {
                    routeName: '美丽乡村一日游',
                    routeDuration: '1天',
                    routeDesc: '体验乡村生活，感受自然魅力',
                    routePicture: require('../assets/banner1.jpeg')
                },
                {
                    routeName: '文化体验两日游',
                    routeDuration: '2天',
                    routeDesc: '深入了解当地文化，品尝特色美食',
                    routePicture: require('../assets/banner2.jpeg')
                },
                {
                    routeName: '生态探索三日游',
                    routeDuration: '3天',
                    routeDesc: '探索自然生态，享受宁静时光',
                    routePicture: require('../assets/banner3.jpeg')
                }
            ]
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        loadData() {
            // 加载景点数据
            axios.get('http://localhost:8080/getSiteList')
                .then(response => {
                    this.sites = response.data.dataList || []
                })
                .catch(error => {
                    console.log('加载景点数据失败:', error)
                })

            // 加载民宿数据
            axios.get('http://localhost:8080/getHotelList')
                .then(response => {
                    this.hotels = response.data.dataList || []
                })
                .catch(error => {
                    console.log('加载民宿数据失败:', error)
                })

            // 加载美食数据
            axios.get('http://localhost:8080/getProductList')
                .then(response => {
                    this.products = response.data.dataList || []
                })
                .catch(error => {
                    console.log('加载美食数据失败:', error)
                })

            // 加载活动数据
            axios.get('http://localhost:8080/getActivityList')
                .then(response => {
                    this.activities = response.data.dataList || []
                })
                .catch(error => {
                    console.log('加载活动数据失败:', error)
                })

            // 加载线路数据
            axios.get('http://localhost:8080/getLineList')
                .then(response => {
                    this.lines = response.data.dataList || []
                })
                .catch(error => {
                    console.log('加载线路数据失败:', error)
                })

            // 加载非遗数据
            axios.get('http://localhost:8080/getIchList')
                .then(response => {
                    this.ichs = response.data.dataList || []
                })
                .catch(error => {
                    console.log('加载非遗数据失败:', error)
                })
        },

        // 显示详情弹窗方法
        showSiteDetail(site, index) {
            this.selectedSite = site;
            this.siteDetailVisible = true;
        },

        showHotelDetail(hotel, index) {
            this.selectedHotel = hotel;
            this.hotelDetailVisible = true;
        },

        showProductDetail(product, index) {
            this.selectedProduct = product;
            this.productDetailVisible = true;
        },

        showActivityDetail(activity, index) {
            this.selectedActivity = activity;
            this.activityDetailVisible = true;
        },

        showLineDetail(line, index) {
            this.selectedLine = line;
            this.lineDetailVisible = true;
        },

        showIchDetail(ich, index) {
            this.selectedIch = ich;
            this.ichDetailVisible = true;
        },

        // 预订/报名处理方法
        handleSiteBook() {
            const currentUser = localStorage.getItem("userName");
            if (currentUser === "" || currentUser == null) {
                this.$message.warning('请先登录');
                this.$router.push('/login');
                return;
            }
            this.$message.info('请前往景区页面进行预订');
            this.$router.push('/site');
        },

        handleHotelBook() {
            const currentUser = localStorage.getItem("userName");
            if (currentUser === "" || currentUser == null) {
                this.$message.warning('请先登录');
                this.$router.push('/login');
                return;
            }
            this.$message.info('请前往民宿页面进行预订');
            this.$router.push('/hotel');
        },

        handleProductBook() {
            const currentUser = localStorage.getItem("userName");
            if (currentUser === "" || currentUser == null) {
                this.$message.warning('请先登录');
                this.$router.push('/login');
                return;
            }
            this.$message.info('请前往美食页面进行预订');
            this.$router.push('/product');
        },

        handleActivityBook() {
            const currentUser = localStorage.getItem("userName");
            if (currentUser === "" || currentUser == null) {
                this.$message.warning('请先登录');
                this.$router.push('/login');
                return;
            }
            this.$message.info('请前往活动页面进行报名');
            this.$router.push('/activity');
        },

        handleLineBook() {
            const currentUser = localStorage.getItem("userName");
            if (currentUser === "" || currentUser == null) {
                this.$message.warning('请先登录');
                this.$router.push('/login');
                return;
            }
            this.$message.info('请前往线路页面进行预订');
            this.$router.push('/line');
        },


        // 关闭对话框
        handleClose(done) {
            this.siteDetailVisible = false;
            this.hotelDetailVisible = false;
            this.productDetailVisible = false;
            this.activityDetailVisible = false;
            this.lineDetailVisible = false;
            this.ichDetailVisible = false;
            this.selectedSite = null;
            this.selectedHotel = null;
            this.selectedProduct = null;
            this.selectedActivity = null;
            this.selectedLine = null;
            this.selectedIch = null;
            if (done) done();
        }
    }
}
</script>

<style scoped>
.popular-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.popular-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.popular-category {
    margin-bottom: 80px;
}

.category-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.category-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.category-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.category-desc {
    font-size: 14px;
    color: #999;
    margin-bottom: 0;
}

.view-more {
    position: absolute;
    top: 0;
    right: 0;
    color: #409EFF;
    text-decoration: none;
    font-size: 14px;
}

.category-content {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.destination-card {
    flex: 1;
    max-width: 350px;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.destination-card:hover {
    transform: translateY(-5px);
}

.card-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 20px;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.destination-card:hover .card-overlay {
    transform: translateY(-10px);
}

.card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
    color: white;
}

.card-info {
    font-size: 14px;
    margin-bottom: 5px;
    color: #e0e0e0;
}

.card-attractions {
    font-size: 12px;
    margin-bottom: 15px;
    color: #ccc;
    line-height: 1.4;
}

.view-details {
    background-color: #409EFF;
    border-color: #409EFF;
    font-size: 12px;
    padding: 6px 12px;
}

/* 详情对话框样式 */
.detail-dialog {
    display: flex;
    gap: 20px;
}

.detail-image {
    flex: 1;
}

.detail-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.detail-content h2 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.8rem;
    font-weight: 600;
}

.detail-info p {
    margin: 12px 0;
    color: #666;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
}

.detail-info i {
    color: #42b983;
    margin-right: 8px;
    width: 16px;
    margin-top: 2px;
}

.detail-actions {
    margin-top: 20px;
    text-align: center;
}

.el-dialog {
    border-radius: 8px;
}

@media (max-width: 768px) {
    .category-content {
        flex-direction: column;
        align-items: center;
    }

    .destination-card {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .view-more {
        position: static;
        display: block;
        margin-top: 10px;
    }
}
</style>
